<template>
    <div id="app">
      <el-container style="height: 700px; border: 1px solid #eee">
        <el-aside width="200px" style="background-color: rgb(238, 241, 246)">
          <el-menu default-active="1">
            <el-submenu index="1">
              <template slot="title"><i class="el-icon-message"></i>导航一</template>
              <el-menu-item-group>
                <el-menu-item index="1-1" @click="publishEvent">发布活动</el-menu-item>
                <el-menu-item index="1-2" @click="reviewEvent">审核活动</el-menu-item>
                <el-menu-item index="1-4" @click="viewAllEvents">活动列表</el-menu-item>
              </el-menu-item-group>
            </el-submenu>
          </el-menu>
        </el-aside>
        <el-container>
          <el-header style="text-align: right; font-size: 12px">
            <el-dropdown>
              <i class="el-icon-setting" style="margin-right: 15px"></i>
              <el-dropdown-menu slot="dropdown">
                <el-dropdown-item @click.native="Logout">退出登录</el-dropdown-item>
              </el-dropdown-menu>
            </el-dropdown>
            <span>管理员</span>
          </el-header>
          <el-main>
            <router-view v-bind:is="currentComponent"></router-view>
          </el-main>
        </el-container>
      </el-container>
    </div>
  </template>
  
  <script>
  import activitypost from '../components/activitypost.vue';
  import activityreview from '../components/activityreview.vue';
  import activitylist from '../components/activitylist.vue';
  import Login from '../components/Login.vue'
  
  export default {
    name: 'admin',
    components: {
      activitypost,
      activityreview,
      activitylist,
      Login
    },
    data() {
      return {
        currentComponent: null
      };
    },
    methods: {
      publishEvent() {
        this.currentComponent = 'activitypost';
      },
      reviewEvent() {
        this.currentComponent = 'activityreview';
      },
      viewAllEvents() {
        this.currentComponent = 'activitylist';
      },
      Logout() {
        this.$router.push({ name: 'Home' });
      }
    }
  };
  </script>
  
  <style scoped>
    .el-header {
      background-color: #B3C0D1;
      color: #333;
      line-height: 60px;
    }
    
    .el-aside {
      color: #333;
    }
    
    .el-main {
      padding: 20px;
    }
  </style>
  